/* .el-table
  -------------------------- */
.el-table {
  background-color: transparent;
  border-color: rgba($--border-color-base, 0.1);

  .cell {
    color: $-color-primary;

    div {
      color: $-color-primary;
    }
  }

  tr {
    background-color: transparent;
  }

  thead {
    color: rgba($--color-black-2, .7);
  }

  th.is-leaf,
  td {
    border-color: rgba($--border-color-base, 0.1);
  }

  &::before {
    content: none;
  }

  .el-table__header-wrapper thead tr th {
    background-color: rgba($--color-black-2, .4);
  }
}

.el-table th.el-table__cell.is-leaf,
.el-table td.el-table__cell {
  border-color: transparent;
}

.el-table--group::after,
.el-table--border::after {
  background-color: rgba($--border-color-base, 0.5);
}

.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: rgba($--color-black-1, 0.5);
}

.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background-color: rgba($--color-black-2, .1);
}

.el-table--enable-row-hover .el-table__body tr:hover>td {
  background-color: rgba($--color-black-1, .5) !important;
}

/* el-progress
    ------------------------------------ */
.el-progress {
  .el-progress-bar__outer {
    background-color: $--color-black-1;
  }

  .el-progress-bar__innerText {
    color: $--color-black;
  }
}

/* el-date-picker
    ------------------------------------ */
.el-date-picker {
  .el-date-picker__time-header {
    border-color: $--color-black-3;
  }
}

/* el-pagination
    ---------------------------------------- */
.el-pagination.is-background {
  .el-pager li:not(.disabled).active {
    color: $--color-black;
  }
}

/* el-card
    ---------------------------------------- */
.el-card {
  color: $--color-black-1;
  border-color: $--color-black-1;
}

/* el-badge
    ---------------------------------------- */
.el-badge {
  .el-badge__content {
    color: $--color-black;
  }
}

/* el-skeleton
    -------------------------------------- */
.el-skeleton {
  .el-skeleton__item {
    background-color: $--color-black-1;
  }
}

/* .el-empty
    ---------------------------------------- */
.el-empty {
  .el-empty__image svg {

    path,
    polygon,
    rect {
      fill: $--color-black-4;
    }

    #Rectangle-Copy-12,
    #Rectangle-Copy-15 {
      fill: $--color-black-5;
    }

    #Rectangle-Copy-18 {
      fill: $--color-black-6;
    }

    #Rectangle-Copy {
      fill: $--color-black-8;
    }

    #Rectangle-Copy-10 {
      fill: $--color-black-3;
    }

    #Oval-Copy-2 {
      fill: rgba($--color-black-3, 0.8);
    }
  }
}

/* el-loading
    ------------------------------------- */
.el-loading-mask {
  background-color: rgba(33, 40, 63, 0.8);
}

/* el-message
    ------------------------------------- */
.el-message {
  border: none;

  &[class*="success"] {
    background-color: rgba(mix(#000, $--color-success, 30%), 0.7);
  }

  &[class*="warning"] {
    background-color: rgba(mix(#000, $--color-warning, 30%), 0.7);
  }

  &[class*="error"] {
    background-color: rgba(mix(#000, $--color-danger, 30%), 0.7);
  }
}

/* v-modal
    ------------------------------------- */
.v-modal {
  background-color: #000;
  opacity: 0.8;
}

/* el-message-box__wrapper
    ------------------------------------- */
.el-message-box {
  border: none;
  background-color: $--color-black-2;
}

/* el-notification
    ------------------------------------- */
.el-notification {
  border: none;
  background-color: $--color-black-2;
}

/* .el-tabs__nav-wrap::after
    ------------------------------------- */
.el-tabs {
  .el-tabs__nav-wrap::after {
    background-color: $--color-black-1;
  }

  .el-tabs__nav-wrap {

    .el-tabs__nav {
      border: none;

      .el-tabs__item {
        border: none;
      }

      .el-tabs__item.is-active {
        background-color: #054c6b;
      }
    }
  }

  .el-tabs__header {
    border-bottom: none;
  }
}

/* el-steps
    ------------------------------------- */
.el-steps {
  .el-step__line {
    background-color: $--color-black-2;
  }
}

/* el-dialog
    ------------------------------------- */
.el-dialog {
  .el-dialog__header {
    border: none;
  }
}

/* el-tooltip
    ------------------------------------- */
.el-tooltip__popper {
  &.is-dark {
    background-color: $--color-black-5;
    color: $--color-black;
  }

  &[x-placement^="top"] .popper__arrow::after {
    border-top-color: $--color-black-5;
  }

  &[x-placement^="bottom"] .popper__arrow::after {
    border-bottom-color: $--color-black-5;
  }

  &[x-placement^="left"] .popper__arrow::after {
    border-left-color: $--color-black-5;
  }

  &[x-placement^="right"] .popper__arrow::after {
    border-right-color: $--color-black-5;
  }

  & .popper__arrow {
    border: none;
  }
}

/* el-popover
    ------------------------------------- */
.el-popover {
  border-color: $--border-color-base;
}

/* el-collapse
    -------------------------------------- */
.el-collapse {
  border-color: $--border-color-base;
}

.el-collapse-item__wrap {
  border-color: $--border-color-base;
}

.el-collapse-item__header {
  border-color: $--border-color-base;

  &.is-active {
    border-color: transparent;
  }
}

/* el-timeline
    -------------------------------------- */
.el-timeline {
  .el-timeline-item__tail {
    border-color: $--color-black-2;
  }
}

.el-timeline-item__node:not(.el-timeline-item__node--primary) {
  background-color: $--color-black-3;
}


/* el-tree */
.el-tree {
  background: transparent;

  .el-tree-node__label {
    color: $-color-primary;
  }
}


.el-pagination .btn-prev {
  background-color: #ffffff00 !important;
}

.el-pagination .btn-next {
  background-color: #ffffff00 !important;
}

.el-pager li {
  background-color: #ffffff00 !important;
}

.el-loading-mask {
  background: rgba(33, 40, 63, 0.8);
  opacity: 0.9;
  z-index: 9999 !important;
}

.el-message-box__btns {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  align-items: center;

  button:nth-child(1) {
    margin-left: 10px;
  }
}


.el-picker-panel__body-wrapper,
.el-picker-panel__footer {
  background: rgba(33, 40, 63, 0.8);
}

.icon-no .el-table__expand-icon {
  display: none;
}

.el-message-box {
  background: rgba(33, 40, 63, 0.8);
}
